<template>
  <el-dialog title="发票明细" :visible.sync="centerDialogVisible" width="80%" center top="20px">
    <div class="padding-lg" style="max-height: 80vh;overflow: auto">
      <div class="header">发票开出申请单</div>
      <div>
        <el-form ref="cuForm" v-loading="formLoading" :model="cuForm">
          <table class="mailTable">
            <tr class="firstTr">
              <td class="firstTd" style="width: 20%">
                <span class="required_tip">*</span>所属公司
              </td>
              <td style="width: 40%">
                {{ cuForm.dept_head }}
              </td>
              <td style="width: 20%">
                <span class="required_tip">*</span>组别
              </td>
              <td style="width: 20%">
                <div>
                  <el-tooltip effect="dark" placement="right">
                    <div slot="content">
                      <div>组别所含销售单信息</div>
                      <div v-for="(item,index) in cuForm.saleVOList" :key="index">
                        {{
                          item.contract_num + '——' + item.actual_execute_time_start + '~' + item.actual_execute_time_end
                        }}
                      </div>
                    </div>
                    <div>{{ cuForm.group_name }}</div>
                  </el-tooltip>
                </div>
              </td>
            </tr>
            <tr>
              <td class="firstTd">
                <span class="required_tip">*</span>合同编号
              </td>
              <td colspan="3">
                {{ cuForm.contract_num }}
              </td>
            </tr>
            <tr>
              <td class="firstTd">
                <span class="required_tip">*</span>执行时间
              </td>
              <td colspan="3">
                {{ cuForm.contract_begin_date ? cuForm.contract_begin_date + '~' + cuForm.contract_end_date : '' }}
              </td>
            </tr>
            <tr>
              <td class="firstTd">
                <span class="required_tip">*</span>项目名称
              </td>
              <td colspan="3">
                {{ cuForm.project_name }}
              </td>
            </tr>
            <tr>
              <td class="firstTd">
                <span class="required_tip">*</span>客户归属
              </td>
              <td>
                {{ cuForm.person_in_charge_name }}
              </td>
              <td>
                <span class="required_tip">*</span>维护人
              </td>
              <td>
                {{ cuForm.maintenance_staff_name }}
              </td>
            </tr>
            <tr>
              <td class="firstTd">
                <span class="required_tip">*</span>客户名称
              </td>
              <td colspan="3">
                <div>
                  {{ cuForm.customer_name }}
                </div>
              </td>
            </tr>
            <tr>
              <td class="firstTd">
                <span class="required_tip">*</span>地址
              </td>
              <td>
                <div>
                  {{ cuForm.address }}
                </div>
              </td>
              <td>
                <span class="required_tip">*</span>电话
              </td>
              <td>
                <div>
                  {{ cuForm.address }}
                </div>
              </td>
            </tr>
            <tr>
              <td class="firstTd">
                <span class="required_tip">*</span>统一社会信用代码
              </td>
              <td colspan="3">
                <div>
                  {{ cuForm.company_code }}
                </div>
              </td>
            </tr>
            <tr>
              <td class="firstTd">
                <span class="required_tip">*</span>开户行
              </td>
              <td>
                <div>
                  {{ cuForm.bank_name }}
                </div>
              </td>
              <td>
                <span class="required_tip">*</span>开户账号
              </td>
              <td>
                <div>
                  {{ cuForm.bank_account }}
                </div>
              </td>
            </tr>
            <tr>
              <td class="firstTd">
                <span class="required_tip">*</span>收票单位
              </td>
              <td>
                <div>
                  {{ cuForm.bill_receipt_company }}
                </div>
              </td>
              <td>
                <span class="required_tip">*</span>发票数量
              </td>
              <td>
                <div>
                  {{ cuForm.invoice_quantity + '份' }}
                </div>
              </td>
            </tr>
            <tr>
              <td class="firstTd">
                <span class="required_tip">*</span>业务项目
              </td>
              <td>
                <div>
                  {{ cuForm.business_project }}
                </div>
              </td>
              <td>
                <span class="required_tip">*</span>发票类型
              </td>
              <td>
                <div>
                  {{ cuForm.invoice_type_name }}
                </div>
              </td>
            </tr>
            <tr>
              <td class="firstTd">
                <span class="required_tip">*</span>发票号码
              </td>
              <td>
                <div>
                  {{ cuForm.invoice_num }}
                </div>
              </td>
              <td>
                <span class="required_tip">*</span>开票类目
              </td>
              <td>
                <div>
                  {{ cuForm.invoice_category_name }}
                </div>
              </td>
            </tr>
            <tr>
              <td class="firstTd">
                <span class="required_tip">*</span>发票金额
              </td>
              <td class="text-left">
                <div class="flex flex-no-wrap justify-start">
                  <div>
                    {{ cuForm.invoice_amount }}
                  </div>
                  <span style="text-align: left;margin-left: 5px">
                  {{ invoiceAmountBigString }}
                </span>
                </div>
              </td>
              <td>
                <span class="required_tip">*</span>开票日期
              </td>
              <td>
                <div>
                  {{ cuForm.invoice_date }}
                </div>
              </td>
            </tr>
            <tr>
              <td class="firstTd">
                <span class="required_tip">*</span>增项金额
              </td>
              <td class="text-left" colspan="3">
                <div class="flex flex-no-wrap justify-start">
                  <div>
                    {{ cuForm.additional_amount }}
                  </div>
                  <div style="text-align: left;margin-left: 5px">
                    {{ additionalAmountBigString }}
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td class="firstTd">
                <span class="required_tip">*</span>开票共计
              </td>
              <td class="text-left" colspan="3">
                <div class="flex flex-no-wrap justify-start">
                  <span>{{ cuForm.total_amount }}</span>
                  <span style="margin-left: 20px">{{ totalAmountBigString }}</span>
                </div>
              </td>
            </tr>
          </table>
          <div style="text-align: right;padding-right: 20px">申请人：{{ userName }}</div>
        </el-form>
        <div>
          回执：{{ cuForm.applyAttachments && cuForm.applyAttachments.length > 0 ? '' : '暂无' }}
          <el-upload v-if="cuForm.applyAttachments && cuForm.applyAttachments.length>0"
                     :on-preview="handlePreview"
                     :file-list="cuForm.applyAttachments"
                     :disabled="true"
                     action=""
          >
          </el-upload>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="centerDialogVisible = false">关 闭</el-button>
    </span>
  </el-dialog>

</template>

<script>
import { getDetail } from '@/api/invoice'
import { add, amountToBigStr } from '@/utils/amount'

export default {
  props: {
    id: {
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      cuForm: {
        group_id: null, // 分组id
        dept_id: null, // 子公司id
        dept_head: null, // 子公司抬头
        customer_name: null, // 客户名称
        address: null, // 地址
        phone: null, // 电话
        company_code: null, // 统一社会信用代码
        bank_name: null, // 开户行
        bank_account: null, // 开户账户
        bill_receipt_company: null, // 收票单位
        invoice_quantity: null, // 发票数量
        business_project: null, // 业务项目
        invoice_type_id: null, // 发票类型
        invoice_num: null, // 发票号码
        invoice_category_id: null, // 开票类目
        invoice_amount: null, // 发票金额
        invoice_date: null, // 开票日期
        additional_amount: null, // 增项金额
        total_amount: 0, // 开票共计
        person_in_charge_name: null, // 客户负责人名称
        maintenance_staff_name: null, // 客户维护人名称
        group_name: null, // 分组名称
        invoice_type_name: null, // 发票类型名称
        invoice_category_name: null, // 发票类型名称
        flow_applyer_name: null, // 申请人名称
        contract_num: null, // 合同编号
        contract_begin_date: null, // 合同开始时间
        contract_end_date: null, // 合同结束时间
        project_name: null, // 项目名称
        can_check: false, // 是否可以审核
        saleVOList: [] // 组关联的销售单数据
      },
      formLoading: false,
      centerDialogVisible: false
    }
  },
  computed: {
    userName() {
      return this.cuForm.flow_applyer_name ? this.cuForm.flow_applyer_name : this.$store.state.user.name
    },
    invoiceAmountBigString() {
      return amountToBigStr(this.cuForm.invoice_amount)
    },
    additionalAmountBigString() {
      return amountToBigStr(this.cuForm.additional_amount)
    },
    totalAmountBigString() {
      return amountToBigStr(this.cuForm.total_amount)
    }
  },
  watch: {
    'cuForm.invoice_amount'(val) {
      let sum = 0
      if (this.cuForm.additional_amount && !isNaN(this.cuForm.additional_amount)) {
        sum = add(this.cuForm.additional_amount, val)
      } else {
        sum = add('0', val)
      }
      this.cuForm.total_amount = sum
    },
    'cuForm.additional_amount'(val) {
      let sum = 0
      if (this.cuForm.invoice_amount && !isNaN(this.cuForm.invoice_amount)) {
        sum = add(this.cuForm.invoice_amount, val)
      } else {
        sum = add('0', val)
      }
      this.cuForm.total_amount = sum
    }
  },
  methods: {
    open() {
      this.getDetail(this.id)
      this.centerDialogVisible = true
    },
    getDetail(id) {
      this.formLoading = true
      getDetail({ id }).then(res => {
        this.formLoading = false
        this.cuForm = res.data
        this.cuForm.applyAttachments.forEach(item => {
          item.name = item.origin_name
        })
      })
    },
    handlePreview(file) {
      if (file.url) {
        window.open(file.url, '_blank')
      } else {
        this.$message.error('系统异常')
      }
    }
  }
}
</script>

<style scoped>
.mailTable {
  width: 100%;
  font-size: 14px;
  margin: 0 auto 10px auto;
  border-collapse: collapse;
}

.mailTable tr td {
  height: 60px;
  line-height: 35px;
  box-sizing: border-box;
  padding: 0 10px;
  border-bottom: 1px solid #E6EAEE;
  border-right: 1px solid #E6EAEE;
  text-align: center;
}

.firstTr td {
  border-top: 1px solid #E6EAEE;
}

.firstTd {
  border-left: 1px solid #E6EAEE;
}

.header {
  text-align: center;
  font-size: 25px;
  font-weight: bold;
  margin: 10px auto;
}

.required_tip {
  color: red;
}

/deep/ .mailTable .el-form-item {
  margin-bottom: 0;
}

/deep/ .mailTable .el-form-item__content {
  line-height: 0;
}
</style>
